<template>
    <div class="dataPageFloatButton2" v-if="oItem && oItem.main.dataPageFloatBtn2Display&&(oItem.main.dataPageFloatBtnImg2||oItem.main.dataPageFloatBtnIcon2)" :style="{
        borderColor: oItem.main.floatBtnBorderColor||'transparent',
        backgroundColor: oItem.main.floatBtnBgColor||'transparent',

    left: (oItem.main.floatBtn2Positon=='br' || oItem.main.floatBtn2Positon=='tr') ? 'auto': (oItem.main.floatBtn2OffsetLeftAndRight==100?'calc(100% - 60px)':(oItem.main.floatBtn2OffsetLeftAndRight+'%')),
    top: (oItem.main.floatBtn2Positon=='bl' || oItem.main.floatBtn2Positon=='br') ? 'auto': (oItem.main.floatBtn2OffsetUpAndDown==100? 'calc(100% - 50px)' : (oItem.main.floatBtn2OffsetUpAndDown+'%')),
    right: (oItem.main.floatBtn2Positon=='bl' || oItem.main.floatBtn2Positon=='tl') ? 'auto': (oItem.main.floatBtn2OffsetLeftAndRight==100?'calc(100% - 60px)':(oItem.main.floatBtn2OffsetLeftAndRight+'%')),
    bottom: (oItem.main.floatBtn2Positon=='tl' || oItem.main.floatBtn2Positon=='tr') ? 'auto': (oItem.main.floatBtn2OffsetUpAndDown==100?'calc(100% - 50px)' : (oItem.main.floatBtn2OffsetUpAndDown+'%')),  

}" :class="oItem.main.floatBtn2Positon+ ((oItem.main.floatBtnBorderColor || oItem.main.floatBtnBgColor) ? ' shadow' : '')">
        <img :src="oItem.main.dataPageFloatBtnImg2" v-if="oItem.main.dataPageFloatBtnImg2" alt="">
        <i :class="oItem.main.dataPageFloatBtnIcon2" v-if="!oItem.main.dataPageFloatBtnImg2&&oItem.main.dataPageFloatBtnIcon2" :style="{color:oItem.main.floatBtnIconColor||'transparent'}"></i>
    </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
    name: "dataPageFloatButton2",
    data() {
        return {
            oItem: null,
            ename: "dataPageListComponent",
            id: "2-700002",
        };
    },
    created() {},
    props: [],
    components: {},
    mounted() {
        this.$nextTick(() => {
            this.init();
        });
    },
    methods: {
        //页面初始化
        init() {
            this.oItem = null;
            this.oItem = JSON.parse(
                JSON.stringify(
                    this.decorate.controls[this.decorate.controls.length - 1]
                )
            );
        },
    },
    computed: mapState(["decorate"]),
    watch: {},
};
</script>
<style scoped lang="scss">
.dataPageFloatButton2 {
    position: absolute;
    z-index: 10;
    border-radius: 100%;
    border: 5px solid #fff;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &.shadow{
        box-shadow: -3px -3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee;
    }
    i {
        font-size: 24px;
        opacity: 0.9;
    }
    img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
    }
    &.br {
        left: auto !important;
        top: auto !important;
    }
    &.bl {
        right: auto !important;
        top: auto !important;
    }
    &.tr {
        left: auto !important;
        bottom: auto !important;
    }
    &.tl {
        right: auto !important;
        bottom: auto !important;
    }
}
</style>